<template>
    <div class="box">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="账号:" prop="account" :rules="[{ required: true, message: '  请输入账号！' }]">
                <el-input v-model="ruleForm.account" />
            </el-form-item>
            <el-form-item label="密码" prop="pass" :rules="[{ required: true, message: ' 请输入密码！' }]">
                <el-input v-model="ruleForm.pass" type="password" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from "vue-router";
import useUserstore from '@/store/modules/user';
import { gettime } from "../../common/date";
import { ElNotification } from 'element-plus';
console.log(gettime());
const router = useRouter()
const userStore = useUserstore()
const ruleFormRef = ref()
console.log(userStore.userlogin());


const ruleForm = reactive({
    rules: {},
    account: '',
    pass: '',
})


const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
           
            userStore.userlogin(ruleForm)
            localStorage.setItem('username', ruleForm.account)
            ElNotification({
                type: 'success',
                title: `Hi ${ruleForm.account}, ${gettime()}好`,
                message: '欢迎回来'
            })
            router.push({
                path: '/home',
                query: {
                    redirect: '',
                },
            })

        }
    })
}

</script>
<style lang="scss" scoped>
.box {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    --tw-bg-opacity: 1;
    // background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    background: url('@/assets/background.png') no-repeat;
    background-size: cover;
}

:deep(.el-input__inner) {
    background-color: #fff;
}

:deep(.el-form-item__label) {
    color: #fff;
}

:deep(.el-button) {
    width: 100%;
}
</style>